<template>
  <div class="home">
    <van-nav-bar
      title="录入信息"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-form validate-first @submit="onSubmit">
      <!-- 通过 pattern 进行正则校验 -->
      <van-field input-align="right"
        label="姓名"
        required
        v-model="formData.name"
        name="pattern"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <van-field input-align="right"
        label="性别"
        required
        v-model="formData.sex"
        name="pattern"
        placeholder="请输入性别"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="国籍"
        required
        v-model="formData.nationality"
        name="pattern"
        placeholder="请输入国籍"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="人员类型"
        required
        v-model="formData.type"
        name="pattern"
        placeholder="请输入人员类型"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="出入境证件类型"
        required
        v-model="formData.card_type"
        name="pattern"
        placeholder="请输入出入境证件(证件类型)"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
       <van-field input-align="right"
        label="证件号"
        required
        v-model="formData.zj_number"
        name="pattern"
        placeholder="请输入证件号"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="身份证号"
        required
        v-model="formData.card_no"
        name="pattern"
        placeholder="请输入身份证号"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="本人电话"
        required
        v-model="formData.mobile"
        name="phoneRules"
        placeholder="请输入本人电话"
        :rules="[{ required: true,pattern:phoneRules, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="国内联系人姓名"
        required
        v-model="formData.contactName"
        name="pattern"
        placeholder="请输入国内联系人姓名"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="国内联系人电话"
        required
        v-model="formData.contactMobile"
        name="pattern"
        placeholder="请输入国内联系人电话"
        :rules="[{ required: true,pattern:phoneRules, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="中国居住地"
        required
        v-model="formData.address"
        name="pattern"
        placeholder="请输入中国居住地"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="详细地址"
        required
        v-model="formData.detailedAddress"
        name="pattern"
        placeholder="请输入详细地址"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="入境点"
        required
        v-model="formData.entryPoint"
        name="pattern"
        placeholder="请输入入境点"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="入境日期"
        required
        @focus="showDate = true"
        v-model="formData.inCountryDate"
        name="pattern"
        placeholder="请输入入境日期"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />

      <van-field input-align="right"
        label="入境航班"
        required
        v-model="formData.inboundFlightNumber"
        name="pattern"
        placeholder="请输入入境航班"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="航班座位号"
        required
        v-model="formData.inboundFlightSeat"
        name="pattern"
        placeholder="请输入航班座位号"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="航班类型"
        required
        v-model="formData.flightType"
        name="pattern"
        placeholder="请输入航班类型"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="出发国家"
        required
        v-model="formData.departCountry"
        name="pattern"
        placeholder="请输入出发国家"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field input-align="right"
        label="境外长期停留国家"
        required
        v-model="formData.longStayCountry"
        name="pattern"
        placeholder="请输入境外长期停留国家"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <div style="margin: 16px;display:flex;">
        <div block type="info" class="get-area" @click="testNfc" >读取护照(敬请期待)</div>
        <van-button block type="info" native-type="submit" >确认</van-button>
      </div>
    </van-form>
    <!-- 日期 -->
    <van-popup v-model="showDate"  round position="bottom">
      <van-datetime-picker
      @confirm="getConfirm"
      @cancel="showDate = false"
      :min-date="minDate"
      type="date"
      title="选择年月日"
      />
    </van-popup>

  </div>
</template>

<script>
import { addAreaEnterdlAirport } from '@/api/gov/home'
import { Toast, Dialog } from 'vant'
export default {
  data () {
    return {
      minDate: new Date(),
      showDate: false, // 选择生日
      formData: {
        name: '联系人姓名', // 联系人姓名
        sex: '性别', // 性别
        mobile: '13333333333', // 本人电话
        zj_number: '证件号', // 证件号
        card_no: '210181198906294018', // 身份证号
        type: '人员类型', // 人员类型
        nationality: '国籍', // 国籍
        contactName: '国内联系人姓名', // 国内联系人姓名
        contactMobile: '13666666666', // 国内联系人电话
        address: '中国居住地', // 中国居住地
        detailedAddress: '详细地址', // 详细地址
        entryPoint: '入境点', // 入境点
        flightType: '航班类型', // 航班类型
        departCountry: '出发国家', // 出发国家
        longStayCountry: '境外长期停留国家', // 境外长期停留国家
        card_type: '出入境证件类型', // 出入境证件类型
        inCountryDate: '', // 入境日期
        inboundFlightNumber: '入境航班', // 入境航班
        inboundFlightSeat: '航班座位号', // 航班座位号
        enter_type: '' // 入连类型 1境外 2域外 3火车 4港口 5客运 6交通卡口
      },
      pickerShow: false, // 时间选择
      phoneRules: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
    }
  },
  mounted () {
    this.formData.enter_type = this.$route.query.id
    console.log('备案类型,', this.formData.enter_type)
  },
  methods: {
    getConfirm (value) {
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.inCountryDate = yy + '-' + mm + '-' + dd
      this.showDate = false
    },

    testNfc () {

    },
    onSubmit () {
      Toast.loading({ message: '加载中...', forbidClick: true, duration: 10000 })
      addAreaEnterdlAirport(this.formData).then(res => {
        Toast.clear()
        if (res.data.errcode === 0) {
          Dialog.alert({
            message: '提交成功',
            showCancelButton: false,
            showConfirmButton: false
          }).then(() => {})
          const TIMEOUT = setTimeout(() => {
            Dialog.close()
            clearTimeout(TIMEOUT)
          }, 2000)
          // 提交成功清空数据
          for (let i in this.formData) {
            this.formData[i] = ''
          }
        } else {
          Toast.fail(res.data.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  img{
    width: 100%;
  }
  .dialog-container{
    height: 70vh;
    overflow-y: auto;
  }
  .get-area{
    width: 100%;
    padding: 0 0.8rem;
    font-size: 0.747rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.053rem solid #1989fa;
    height: 2.347rem;
    line-height: 2.347rem;
    text-align: center;
    border-radius: 0.107rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
  }
  /deep/.van-field__label{
    width: 8em;
  }
  /deep/.van-field__error-message{
    text-align: right;
  }
  .title{
    // font-size: 28px;
    text-indent: 20px;
    padding: 50px 0 20px;
  }
  .container{
    width: 90%;
    height: 80vh;
    overflow-y: auto;
    border: 1px solid #adadad;
    margin: auto;
    .item{
      margin: 10px;
    }
  }
}
.up-and-down{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f3f4;
  height: 80px;
  color: #333;
}
</style>
